<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/adjustment'}">酬金调酬</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>条件区域</el-breadcrumb-item>
            </el-breadcrumb>
            <el-row>
                <el-col :span="5" class="odd">用户名:</el-col>
                <el-col :span="4" class="even">
                    <el-input v-model="userName" placeholder="请输入用户名"></el-input>
                </el-col>
                <el-col :span="6" class="odd">酬金科目:</el-col>
                <el-col :span="4" class="even">
                    <el-select v-model="chanType" placeholder="请选择">
                        <el-option
                        v-for="item in channelType"
                        :key="item.id"
                        :label="item.courseName"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
        </el-card>
        <el-card class="box-card">
                <el-button type="primary" @click="search">查询</el-button>
                 <el-button type="warning">重置</el-button>
        </el-card>
        <el-card class="box-card">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>列表区域</el-breadcrumb-item>
            </el-breadcrumb>
            <el-table
                    :data="tableData"
                    height="370"
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="50"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户名"
                        width="180"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="courseName"
                        label="政策科目"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱"
                        align='center'>
                </el-table-column>
                <el-table-column
                        prop="sum"
                        label="应付账金金额"
                        align='center'>
                </el-table-column>
                <el-table-column
                        label="状态">
                    <template slot-scope="scope">
                        <span :class="scope.row.adjustmentAction==0?'statusActive':'statusDel'">{{scope.row.adjustmentAction==0?'未发送':'已发送'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="operation"
                        label="操作"
                        align='center'>
                    <template slot-scope="scope" >
                        <el-button type="success" :class="scope.row.adjustmentAction==0?'xianshi':'xiaoshi'" icon="el-icon-message"  circle @click="fasong(scope.row)">发送</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-card>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="zongyeshu*10"
                    @current-change="fengye($event)"
            >
            </el-pagination>
            总条数：{{zongji}}
            当前页数：{{yeshu}}/{{zongyeshu}}
        </el-card>
    </div>
</template>

<script>
    export default {
        name:'Adjustment',
        data() {
            return {
                dialogVisible: false,//审核对话框
                dialogEdit: false,//修改对话框
                jine:0,//金额
                tableData: [],
                userName: '',
                chanType: '',
                channelType1: [],
                channelType: [],
                zongji: 12,//总计
                yeshu: 1,//页数
                zongyeshu: 10,//总页数
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
            };
        },
        methods: {
            //查询
            search() {

                console.log(this.chanType)
                this.$axios.get('api/AdjustmentDto/AdjustmentDtoSelectAll',{
                    params: {
                        courseName: this.chanType,
                        limit: 10,
                        page: this.yeshu,
                        userName: this.userName,
                    }
                })
                    .then((res)=>{
                        let result = res.data;
                        console.log(result);

                        if(result.code == 200) {
                            this.tableData = result.data
                            this.$message({
                                duration:1500,
                                message: result.msg,
                                type: 'success'
                            });
                            this.zongji=result.count
                            this.zongyeshu=Math.ceil(this.zongji/10)
                        }else{
                            this.tableData = result.data
                            this.$message({
                                duration:1500,
                                message: result.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch((err)=>{
                        console.log(err);
                        this.$message({
                            duration:1500,
                            message: '请求出错',
                            type: 'error'
                        });
                    })
            },
//显示
            getListInfo() {
                this.$axios.get('api/AdjustmentDto/AdjustmentDtoSelectAll',{
                    params:{
                        limit : 10,
                        page : this.yeshu,
                    }
                })
                    .then((res)=>{
                        let result = res.data;
                        console.log(result)
                        if(result.code == 200){
                            this.tableData = result.data
                            this.zongji=result.count
                            this.zongyeshu=Math.ceil(this.zongji/10)

                        }else{
                            this.$message({
                                duration:1500,
                                message: result.msg,
                                type: 'error'
                            });
                        }
                    })
                    .catch((err)=>{
                        console.log(err);
                        this.$message({
                            duration:1500,
                            message: '请求出错',
                            type: 'error'
                        });
                    })
            },
            fasong:function(obj){
                this.$axios.post("api/AdjustmentDto/AdjustmentDtoUpdate",{
                    cId: obj.cId,
                    phone: obj.phone,
                    id: obj.id
                }).then((res)=>{
                    let result = res.data;
                    if(result.code == 200){
                        this.$message({
                            duration:1500,
                            message: result.msg,
                            type: 'error'
                        });
                       this.getListInfo();
                    }else{
                        this.$message({
                            duration:1500,
                            message: result.msg,
                            type: 'error'
                        });
                    }
                })
            },
            zhece(){
                this.$axios.get("api/course/selectAll",{}).then((res)=>{
                    let result = res.data;
                    if(result.code == 200){
                        this.channelType1[0]={id:"",courseName:"全部"}
                        for(let i=1;i<=result.data.length;i++){
                            this.channelType1[i]=result.data[i-1];
                        }

                        console.log(this.channelType1)
                        this.channelType=this.channelType1
                    }else{
                        this.$message({
                            duration:1500,
                            message: result.msg,
                            type: 'error'
                        });
                    }
                })
            },
            fengye:function (e) {
                console.log(e)
                this.yeshu=e;
                this.getListInfo();
            }

        },
        created() {
            this.getListInfo();
            this.zhece();
        }
    }
</script>

<style scoped>
    .el-table {
        margin-top: 10px;
    }
    .btnSearch {
        text-align: right;
    }
    .btnExa {
        text-align: left;
        margin-left: 10px;
    }
    .odd {
        text-align: right;
    }
    .even {
        text-align: left;
        padding-left: 10px;
    }
    .el-col {
        /* border: 1px solid black; */
        height: 50px;
        line-height: 50px;
    }
    .box-card {
        margin-bottom: 10px;
    }
    .modelSearch {
        text-align: center;
    }
    .el-breadcrumb {
        margin-bottom: 10px;
    }
    .xianshi{
        display:block;
    }
    .xiaoshi{
        display: none;
    }
</style>
